<template>
  <div class="container">
    <el-dialog
      width="900px"
      @close="close"
      title="题目预览"
      :visible="dialogVisible"
    >
      <meta name="referrer" content="never" />
      <div class="dialog">
        <div class="dialogHeader">
          <span
            >【题型】:
            {{ questionTypeForm(this.detailList.questionType) }}</span
          >
          <span>【编号】: {{ this.detailList.id }}</span>
          <span>【难度】: {{ difficult(this.detailList.difficulty) }}</span>
          <span>【标签】: {{ this.detailList.tags }}</span>
          <span>【学科】: {{ this.detailList.subjectName }}</span>
          <span>【目录】: {{ this.detailList.directoryName }}</span>
          <span>【方向】: {{ this.detailList.direction }}</span>
        </div>
        <div class="dialogMain">
          <div>
            <hr />
            <span>【题干】:</span>
            <p v-html="detailList.question" style="color: blue"></p>
            <!-- 单选框 -->
            <div v-if="detailList.questionType === '1'">
              <p>
                {{ questionTypeForm(this.detailList.questionType) }}
                选项：（以下选中的选项为正确答案）
              </p>
              <el-radio-group v-model="radio">
                <p
                  v-for="item in detailList.options"
                  :key="item.id"
                  style="margin-bottom: 16px"
                >
                  <el-radio :label="item.isRight">{{ item.title }}</el-radio>
                </p>
              </el-radio-group>
            </div>
            <!-- 多选框 -->
            <div v-else-if="detailList.questionType === '2'">
              <p>
                {{ questionTypeForm(this.detailList.questionType) }}
                选项：（以下选中的选项为正确答案）
              </p>
              <p
                v-for="item in detailList.options"
                :key="item.id"
                style="margin-bottom: 16px"
              >
                <el-checkbox
                  v-model="item.isRight"
                  :disabled="item.isRight === 0"
                  :label="item.isRight"
                  >{{ item.title }}</el-checkbox
                >
              </p>
            </div>
          </div>
          <div>
            <hr />
            <span>【参考答案】: </span>
            <el-button @click="openVideo" type="danger" size="small"
              >视频答案解析</el-button
            >
            <!-- 视频播放器 -->
            <p v-if="showVideo">
              <video
                id="video"
                :src="this.detailList.videoURL"
                controls="controls"
                autoplay="autoplay"
                style="height: 280px; width: 400px"
              ></video>
            </p>
          </div>
          <div>
            <hr />
            <span>【答案解析】: </span>
            <span v-html="this.detailList.answer"></span>
          </div>
          <div>
            <hr />
            <span>【题目备注】: {{ this.detailList.remarks }}</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    showVideo: {
      type: Boolean,
      default: false
    },
    detailList: {
      type: Object,
      default: () => { }
    },
    radio: {
      type: Number,
      default: 1
    }
  },
  methods: {
    // 关闭弹层
    close () {
      this.$emit('close-dialog')
    },
    // 点击关闭按钮
    closeDialog () {
      this.close()
    },
    // 打开视频
    openVideo () {
      this.$emit('open-video')
    },
    // 格式化难度
    difficult (type) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[type]
    },
    questionTypeForm (type) {
      const map = {
        1: '单选题',
        2: '多选题',
        3: '简答题'
      }
      return map[type]
    }
  }
}
</script>

<style scoped>
.dialogHeader span {
  display: inline-block;
  width: 25%;
  margin-bottom: 15px;
}
.dialog-footer {
  display: flex;
  justify-content: end;
}
</style>
